<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
		<title>Google Maps JavaScript API v3 Example: Marker Animations</title>
		<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
	  var iffco = new google.maps.LatLng(28.6457, 77.318944);
	  var vaishali = new google.maps.LatLng(28.6496391, 77.33930);
	  var map;
	
	  function initialize() {
	    var mapOptions = {
	      zoom: 13,
	      mapTypeId: google.maps.MapTypeId.ROADMAP,
	      center: iffco
	    };
	
	    map = new google.maps.Map(document.getElementById("map_canvas"),
	            mapOptions);
	          
	    var marker = new google.maps.Marker({
	      map:map,
	      draggable:true,
	      animation: google.maps.Animation.DROP,
	      position: vaishali
	    });
	    google.maps.event.addListener(marker, 'click', toggleBounce);
	  }
	
	  function toggleBounce() {
	
	    if (marker.getAnimation() != null) {
	      marker.setAnimation(null);
	    } else {
	      marker.setAnimation(google.maps.Animation.BOUNCE);
	    }
	  }
	</script>
	</head>
	<body onload="initialize()">
		<div id="map_canvas" style="width: 500px; height: 400px;">map div</div>
	</body>
</html>
